<template>
  <div class="canvas-wrapper" ref="d3">
    <div class="controls-info">
      <div class="control-item">WASD: 移动</div>
      <div class="control-item">鼠标: 视角</div>
      <div class="control-item">L: 开关车灯</div>
      <div class="control-item">空格: 刹车</div>
    </div>
  </div>
</template>

<style>
.canvas-wrapper {
  width: 100%;  
  height: 100%;
  position: relative;
}

.canvas-wrapper canvas {
  width: 100%;
  height: 100%;
}

.controls-info {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 8px;
  z-index: 100;
}

.control-item {
  margin-bottom: 5px;
}
</style>

<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue';
import * as THREE from 'three';
import { initScene } from '../components/initScene';
import { initNightScene } from '../components/nightScene';

const d3: Ref<HTMLElement> = ref(null);
const stage = initScene({ 
  antialias: true,
  background: new THREE.Color(0x111133),
  ambientLight: 0.1,
  directLight: 0.3
});

onMounted(() => {
  d3.value.appendChild(stage.renderer.domElement);
  const { camera, renderer, scene, controls } = stage;
  stage.resize();
  initNightScene(camera, renderer, scene, controls);
});
</script>